<template>
  <div id="projectHead3">
    <div class="btn-out1">
      <img @click="drawer = true" src="../../assets/img/shousuo.png" alt />
    </div>
    <div class="navs-fix">
      <ul class="navs">
        <li
          @click="navClick(v.id)"
          :class="navStatus==v.id?'liActive':''"
          v-for="(v,i) in navList"
          :key="i"
        >
          <img :src="navStatus!=v.id?v.iconC:v.icon" alt />
          <p>{{v.name}}</p>
        </li>
      </ul>
      <img @click="drawer = false" class="you" src="../../assets/img/youbian.png" alt />
    </div>
    <!-- 合约记录 -->
    <el-dialog width="1000px" :visible.sync="contractRecordStatus">
      <contractRecord ref="contractRecord"></contractRecord>
    </el-dialog>
    <!-- 合约账单 -->
    <el-dialog width="1000px" :visible.sync="contractBillStatus">
      <contractBill ref="contractBill"></contractBill>
    </el-dialog>
    <!-- 合约划转 -->
    <el-dialog width="1000px" :visible.sync="transferStatus">
      <transfer ref="transfer"></transfer>
    </el-dialog>
  </div>
</template>
<script>
import contractRecord from "../contractRecord/contractRecord";
import contractBill from "../contractBill/contractBill";
import transfer from "../transfer/transfer";
import $ from "jquery";
export default {
  name: "projectHead3",
  data() {
    return {
      drawer: false,
      navStatus: -1,
      navList: [
        {
          icon: require("../../assets/img/OTCbai.png"),
          iconC: require("../../assets/img/OTCjianbian.png"),
          id: 0,
          name: "OTC"
        },
        {
          icon: require("../../assets/img/huazhuanbai.png"),
          iconC: require("../../assets/img/huazhuanjianbian.png"),
          id: 1,
          name: "划转"
        },
        {
          icon: require("../../assets/img/jilubai.png"),
          iconC: require("../../assets/img/jilujianbian.png"),
          id: 2,
          name: "合约记录"
        },
        {
          icon: require("../../assets/img/heyuezhangdan.png"),
          iconC: require("../../assets/img/heyuezhangdan2.png"),
          id: 3,
          name: "合约账单"
        },
        {
          icon: require("../../assets/img/bangzubai.png"),
          iconC: require("../../assets/img/bangzujianbian.png"),
          id: 4,
          name: "帮助中心"
        },
        {
          icon: require("../../assets/img/xiazaijianbian2.png"),
          iconC: require("../../assets/img/xiazaijianbian1.png"),
          id: 5,
          name: "APP下载"
        }
      ],
      contractRecordStatus: false, //合约记录
      contractBillStatus:false,//合约账单
      transferStatus:false,//合约划转
    };
  },
  components: {
    contractRecord,
    contractBill,
    transfer
  },
  watch: {
    contractRecordStatus() {
      this.contractRecordStatus == false ? (this.navStatus = -1) : "";
    },
    contractBillStatus() {
      this.contractBillStatus == false ? (this.navStatus = -1) : "";
    },
    transferStatus() {
      this.transferStatus == false ? (this.navStatus = -1) : "";
    },
    drawer() {
      if (this.drawer) {
        $(".navs-fix").animate(
          {
            right: "0"
          },
          300
        );
        $(".btn-out").animate(
          {
            right: "-80px"
          },
          300
        );
      } else {
        $(".navs-fix").animate(
          {
            right: "-77px"
          },
          300
        );
        $(".btn-out").animate(
          {
            right: "0"
          },
          300
        );
      }
    }
  },
  methods: {
    navClick(val) {
      this.navStatus = val;
      if (val == 1) {
        this.transferStatus = true;
        setTimeout(()=>{
          this.$refs.transfer.getWallet();
        this.$refs.transfer.getWalletOtc();
        },1000)
      } else {
        this.transferStatus = false;
      }
      if (val == 2) {
        this.contractRecordStatus = true;
        setTimeout(()=>{
          this.$refs.contractRecord.getHold();
        this.$refs.contractRecord.getClose();
        this.$refs.contractRecord.getCurent();
        this.$refs.contractRecord.getHistory();
        },1000)
        
      } else {
        this.contractRecordStatus = false;
      }
      if (val == 3) {
        this.contractBillStatus = true;
        setTimeout(()=>{
         this.$refs.contractBill.getRecord();
        },1000)
        
      } else {
        this.contractBillStatus = false;
      }
      if(val == 0){
        this.$router.push({path:'/otc'})
      }
      if(val == 4){
        this.$router.push({path:'/messageCenter'})
        
      }
    }
  }
};
</script>
<style lang='less' scope>
.btn-out1 {
  position: fixed;
  right: 0;
  top: 550px;
  color: red;
  z-index: 4;
  width: 60px;
  > img {
    width: 100%;
  }
}
#projectHead3 {
  .navs-fix {
    position: fixed;
    right: -77px;
    top: 100px;
    z-index: 5;
    > .you {
      position: absolute;
      bottom: -40px;
      left: 20px;
    }
    .navs {
      width: 77px;

      background-color: #fff;
      border-radius: 30px 0 0 30px;
      border: 1px solid #eee;
      overflow: hidden;
      > li {
        text-align: center;
        padding: 20px 0;
        cursor: pointer;
        p {
          margin-top: 5px;
          font-size: 14px;
          color: #a1b1b0;
        }
      }
      > .liActive {
        background-image: linear-gradient(#fff4e5, #f1d4ad);
        > p {
          color: #fff !important;
        }
      }
    }
  }
  .el-dialog__body {
    padding: 20px 20px !important;
  }
}
</style>